@use '../../../styles/theme/variables.scss' as *;

$module: '#{$sun-prefix}-space';

.#{$module} {
  // 布局
  display: inline-flex;

  // ============================ 方向 ============================
  &-vertical {
    flex-direction: column;
  }

  &-horizontal {
    flex-direction: row;
  }

  // ============================ 间距 ============================
  &-gap-row-small {
    row-gap: $spacing-tight;
  }

  &-gap-row-middle {
    row-gap: $spacing-base;
  }

  &-gap-row-large {
    row-gap: $spacing-loose;
  }

  &-gap-col-small {
    column-gap: $spacing-tight;
  }

  &-gap-col-middle {
    column-gap: $spacing-base;
  }

  &-gap-col-large {
    column-gap: $spacing-loose;
  }

  // ============================ 对齐 ============================
  &-align-start {
    align-items: flex-start;
  }

  &-align-end {
    align-items: flex-end;
  }

  &-align-center {
    align-items: center;
  }

  &-align-baseline {
    align-items: baseline;
  }

  &-align-normal {
    align-items: normal;
  }

  &-justify-start {
    justify-content: flex-start;
  }

  &-justify-end {
    justify-content: flex-end;
  }

  &-justify-center {
    justify-content: center;
  }

  &-justify-between {
    justify-content: space-between;
  }

  &-justify-around {
    justify-content: space-around;
  }

  &-justify-evenly {
    justify-content: space-evenly;
  }

  // ============================ 自动换行 ============================
  &-wrap {
    flex-wrap: wrap;
  }
}
